<template>
  <view>
    <image class="bg" src="../../static/my/bg.png" mode="aspectFill" />
    <u-navbar title="开通会员" bgColor="rgba(0,0,0,0)" auto-back></u-navbar>
    <view class="titleBox">
      <image class="avatar" :src="userAvatar" mode="aspectFill" />
      <view>
        <view class="info">
          <view class="title">
            {{ userName }}
          </view>
          <view class="hyBox" v-if="level !== '0'"> VIP</view>
          <view class="hyBox1" v-else> VIP</view>
        </view>
      </view>
    </view>
    <view class="tabBox">
      <view :class="{ tabItem: true, active: packActive[0]?.payTitle === item[0].payTitle }" @click="tabClick(item)" v-for="(item, index) in packageList" :key="index"> {{ item[0].payTitle }}</view>
    </view>
    <view class="commonBox">
      <view class="packList">
        <view :class="{ pack: true, active: packChildActive.id === i.id }" @click="ItemPackClick(i)" v-for="(i, index) in packActive" :key="index">
          <view class="top">
            <view class="yue">{{ payTypeInfo[i.payType] }}</view>
            <view class="price">
              <text>￥</text>
              {{ i.price }}
            </view>
          </view>
          <view class="bot">每天仅需￥{{ (i.price / 30).toFixed(2) }}</view>
        </view>
      </view>
      <view class="tit">VIP专属权益</view>
      <view class="qyBox">
        <view class="item">
          <view class="left">
            <image src="../../static/my/ypkj.png" mode="aspectFill" />
            <view>云盘空间</view>
          </view>
          <view class="r"> {{ packActive?.payLevel == "1" ? "1" : packActive?.payLevel == "2" ? "4" : packActive?.payLevel == "3" ? "10" : "" }}T个人云盘储存空间</view>
        </view>
        <view class="item">
          <view class="left">
            <image src="../../static/my/gjx.png" mode="aspectFill" />
            <view>工具箱</view>
          </view>
          <view class="r"> 相册工具箱压缩功能不限次数</view>
        </view>
        <view class="item">
          <view class="left">
            <image src="../../static/my/aigjf.png" mode="aspectFill" />
            <view>AI工具坊</view>
          </view>
          <view class="r">AI生成功能不限次数</view>
        </view>
      </view>
      <u-button type="primary" @click="submit" shape="circle" style="margin-top: 40rpx" color="#291602">立即开通</u-button>
      <u-checkbox-group v-model="checkboxValue" active-color="#38b5f8" shape="circle" placement="column">
        <view class="radioBox">
          <u-checkbox label="请阅读 同意" name="1"> </u-checkbox>
          <text class="xfxy" @click="goPage('/pages/myPage/userAgreement')">《用户协议》</text>
          <text class="xfxy" @click="goPage('/pages/myPage/privacyAgreement')">《隐私协议》</text>
        </view>
      </u-checkbox-group>
    </view>
  </view>
</template>
<script setup lang="ts">
import { createOrder, payGroupList } from "@/api/my";
import { goPage } from "@/utils/commonFn";
import { onMounted, ref } from "vue";
const userAvatar = uni.getStorageSync("userInfo").avatar;
const userName = uni.getStorageSync("userInfo").nickName;
const level = uni.getStorageSync("userInfo").level;
const checkboxValue = ref();
onMounted(async () => {
  const res = await payGroupList();
  packageList.value = res.data;
  packActive.value = res.data[1];
  packChildActive.value = res.data[1][0];
});
const payTypeInfo: any = {
  continuous_monthly: "连续包月",
  continuous_quarterly: "连续包季",
  continuous_yearly: "连续包年",
  single_monthly: "单次包月",
  single_quarterly: "单次包季",
  single_yearly: "单次包年",
};
const packageList = ref();
const packActive = ref();
const packChildActive = ref();
const ItemPackClick = (data: any) => {
  packChildActive.value = data;
};
const tabClick = (data: any) => {
  packActive.value = data;
  packChildActive.value = data[0];
};

const submit = async () => {
  if (!checkboxValue.value) {
    uni.showToast({
      icon: "none",
      title: "请勾选隐私协议",
    });
    return;
  }
  const res = await createOrder({ id: packChildActive.value.id });
  let orderInfo: any = res.data;
  uni.requestPayment({
    provider: "wxpay",
    orderInfo,
    ...orderInfo,
    success(res: any) {
      if (res.errMsg == "requestPayment:ok") {
        uni.showToast({
          title: "购买成功",
          icon: "success",
          complete: () => {
            setTimeout(() => {
              uni.switchTab({
                url: "/pages/myPage/myPage",
              });
            }, 600);
          },
        });
      }
    },
    fail() {
      uni.showToast({
        title: "购买失败",
        icon: "error",
      });
    },
  });
};
</script>
<style lang="less" scoped>
.bg {
  position: absolute;
  width: 100vw;
  height: 362rpx;
  z-index: 1;
}
.tabBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff4e6;
  margin-top: 42rpx;
  .tabItem {
    width: 33.33%;
    text-align: center;
    padding: 24rpx 0;
  }
  .active {
    background: #ffffff;
    font-size: 30rpx;
    color: #421f06;
    border-radius: 32rpx 32rpx 0rpx 0rpx;
    font-weight: bold;
    position: relative;
    z-index: 99;
    &::before {
      content: "";
      position: absolute;
      left: 63rpx;
      bottom: 21rpx;
      width: 48%;
      height: 8rpx;
      background: #e6d9d0;
      z-index: -1;
    }
  }
}
.titleBox {
  padding: 0 38rpx;
  padding-top: 110px;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
  .avatar {
    width: 100rpx;
    height: 100rpx;
    background: #add69b;
    border-radius: 50%;
    margin-right: 20rpx;
    border: 2rpx solid #fff;
  }
  .info {
    display: flex;
    align-items: center;
    .title {
      font-size: 32rpx;
      font-weight: 600;
      color: #1e1e1e;
      display: flex;
      align-items: center;
    }
    .hyBox,
    .hyBox1 {
      width: 55rpx;
      background: linear-gradient(90deg, #fddf9e 0%, #ffd274 100%);
      border-radius: 20rpx;
      font-size: 18rpx;
      color: #14041c;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 15rpx;
    }
    .hyBox1 {
      background: #c1c2c6;
      color: #fff;
    }
  }
}
.commonBox {
  position: relative;
  z-index: 2;
}
.packList {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 15rpx;
  .pack {
    width: 48%;
    flex-shrink: 0;
    background: #f3f5f7;
    border-radius: 22rpx;
    text-align: center;
    overflow: hidden;
    font-weight: 500;
    .top {
      padding: 32rpx 44rpx;
      padding-bottom: 10rpx;
    }
    .yue {
      font-size: 26rpx;
      color: #1b1107;
      margin-bottom: 50rpx;
    }
    .bot {
      background: #dee2e5;
      font-size: 22rpx;
      color: #1b1107;
      padding: 8rpx 0;
    }
    .title {
      font-size: 30rpx;
      color: #421f06;
    }
    .price {
      font-size: 34rpx;
      color: #1b1107;
      line-height: 40rpx;
      margin: 20rpx 0;
      font-weight: bold;
      text {
        margin-right: -15rpx;
        font-size: 24rpx;
      }
    }
  }
  .active {
    border: 4rpx solid #f8dbb7;
    background: #fff6e9;
    .bot {
      background: #fbce96;
      color: #fff;
    }
  }
}
.tit {
  font-size: 32rpx;
  color: #000000;
  margin-top: 62rpx;
  margin-bottom: 20rpx;
}
.qyBox {
  border-radius: 32rpx 32rpx 32rpx 32rpx;
  border: 4rpx solid #f8dbb7;
  padding: 36rpx 28rpx;
  margin-bottom: 90rpx;
  .item {
    display: flex;
    align-items: center;
    background: #f6f6f6;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 10rpx 20rpx;
    margin-bottom: 20rpx;
    .left {
      font-weight: 300;
      font-size: 22rpx;
      color: #333333;
      text-align: center;
      width: 18%;
      image {
        width: 44rpx;
        height: 44rpx;
      }
    }
    .r {
      font-weight: 600;
      font-size: 30rpx;
      color: #3d3d3d;
      margin-left: 60rpx;
    }
  }
}
</style>
